<!DOCTYPE html>
<html lang="en">
<head>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>个人好友列表</title>
    <link href="../../css/base.css" rel="stylesheet">
    <link href="../../css/communication.css" rel="stylesheet">
</head>
<body id="communication">
<div class="container">
    <div class="head">
        <i class="icon iconfont icon-jiantou1"></i>
        <h2>好友列表</h2>
        <div class="nav">
            <a class="active">个人</a>
            <a href="org.html">组织</a>
        </div>
    </div>

    <div class="content content-personal">
        <input id="name" placeholder="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;搜索(姓名、编号、手机号)" />
        <div class="list-box-container">
            <div class="content-head">
                <ul class="kind">
                    <li class="blue"><i class="icon iconfont icon-pc"></i>工作</li>
                    <li class="brown"><i class="icon iconfont icon-qinzi"></i>家人</li>
                    <li class="red"><i class="icon iconfont icon-xingming"></i>好友</li>
                    <li class="yellow"><i class="icon iconfont icon-kafei1"></i>生活</li>
                </ul>
            </div>
            <ul class="main"></ul>
            <a class="plus" href="org.html"><i class="icon iconfont icon-add30"></i></a>
        </div>

    </div>

</div>

<script id="list_tmpl" type="text/html">
    {{if objs.length == 0 }}

    {{else}}
    {{each objs as obj i}}
    <li class="box {{obj.className}}" data-url="{{obj.url}}" data-info="{{obj.name}}（{{obj.wx}}）" data-index="{{i+1}}" data-className="{{obj.className}}">
        <div class="img-box"><img src="{{obj.url}}"></div>
        <p>{{obj.name}}（{{obj.wx}}）</p>
        <div class="icon-list"><i class="icon iconfont icon-shouji"></i><i class="icon iconfont icon-icon3"></i><i class="icon iconfont icon-xinfengpsd"></i></div>
        <div class="triangle"></div>
        <div class="num">{{i+1}}</div>
    </li>
    {{/each}}

    {{/if}}
</script>

<script src="../../js/rem.js"></script>
<script src="../../js/lib/jquery.js"></script>
<script src="../../js/lib/template-simple.js"></script>
<script src="../../js/lib/layer_mobile/layer.js"></script>
<script>
    /*输入框*/
    $('.container .content input').bind('input propertychange', function() {
        if( $(this).val()=='' ){
            $(this).css('background-image','url(../../images/search.png)')
        }else{
            $(this).css('background-image','none')
        }
    });

    /*弹窗*/
    $(".list-box-container .main").on('click','li',function(){
        var url = $(this).data('url');
        var info = $(this).data('info');
        var index = $(this).data('index');
        var className = $(this).data('classname');
        layer.open({
            content: "<div class='layer-box-container "+ className +"'>" +
            "<div class='img-box'><img src='"+ url +"'></div>" +
            "<p>"+ info +"</p>" +
            "<ul class='icon-list'>" +
            "<li><i class='icon iconfont icon-weixin'></i><span>微信联系</span></li>" +
            "<li class='right'><i class='icon iconfont icon-icon3'></i><span>QQ联系</span></li>" +
            "<li><i class='icon iconfont icon-shouji'></i><span>呼叫电话</span></li>" +
            "<li class='right'><i class='icon iconfont icon-xinfengpsd'></i><span>创建任务</span></li></ul>" +
            "<div class='triangle'></div>" +
            "<div class='num'>"+ index +"</div>" +
            "</div>",
            className:'layer-box',
            shade: 'background-color: rgba(0,0,0,.3)',
            style:'width:10.5rem;height:13rem'
        });
    });

    function loadList() {
        layer.open({
            type: 2
            ,content: '加载中'
        });
        var data = {
            objs:[
                {"url":"","name":"人名","wx":"微信号","className":"blue"},
                {"url":"","name":"人名","wx":"微信号","className":"blue"},
                {"url":"","name":"人名","wx":"微信号","className":"blue"},
                {"url":"","name":"人名","wx":"微信号","className":"brown"},
                {"url":"","name":"人名","wx":"微信号","className":"brown"},
                {"url":"","name":"人名","wx":"微信号","className":"brown"},
                {"url":"","name":"人名","wx":"微信号","className":"red"},
                {"url":"","name":"人名","wx":"微信号","className":"red"},
                {"url":"","name":"人名","wx":"微信号","className":"red"},
                {"url":"","name":"人名","wx":"微信号","className":"yellow"},
                {"url":"","name":"人名","wx":"微信号","className":"yellow"},
                {"url":"","name":"人名","wx":"微信号","className":"yellow"}
            ]
        };
        var html = template.render("list_tmpl", data);
        $(".list-box-container .main").html(html);
        $(".drop-down").fadeOut(300,'swing');
        layer.closeAll()
    }

    /*上拉刷新*/
    function scroll() {
        var scrollTop = $(this).scrollTop();
        var scrollHeight = $(this).height();
        if (scrollTop >= 0.895*scrollHeight) {
            loadList();
        }
    }

    /*刷新月份*/
    $('.kind li').click(function () {
        if( $(this).hasClass('active') ){
            $(this).removeClass('active');
        }else{
            $(this).addClass('active');
        }
        loadList()
    });

    /*初始化*/
    loadList();
    $(".main").scroll(scroll)

</script>
</body>
</html>